<template>
  <transition name="home" enter-active-class="animated slideInLeft" leave-active-class="animated fadeOutLeft">
    <div class="bookinfo">
      <Headers></Headers>
      <div class="bookinfo_main">
        <!--书籍基本信息-->
        <bookinfoBase></bookinfoBase>
        <!--书籍阅读、加入书架按钮-->
        <div class="bookinfoTab clearfix">
          <div class="btnleft clearfix">
            <readBtn>
              <p slot="readBtn" class="bookinfo_readBtn">立即阅读</p>
            </readBtn>
          </div>
          <div class="btnright">
            <addBtn>
              <p slot="addBtn" class="bookinfo_addBtn" :class="{bookinfo_addBtnimg:!isCollect.code}">{{isCollect.msg}}</p>
            </addBtn>
          </div>
        </div>
        <!--书籍章节信息-->
        <div class="bookinfo_chapter_box clearfix">
          <div class="bookinfo_chapter_left">
            <catalog :BookId="bookId"><p slot="catelogBtn" class="bookinfo_chapter_catalog">目录</p></catalog>
          </div>
          <div class="bookinfo_chapter_right">
            <newCatalog></newCatalog>
          </div>
        </div>
        <!--书籍红包相关-->
        <div class="bookinfo_hb_info_box">
            <bookinfoHbInfo></bookinfoHbInfo>
        </div>
        <!--作品简介与书评-->
        <div class="bookinfo_intro_comment_box">
          <div class="place_box"></div>
          <div class="margin_top_place">
            <div class="tab_intro_comment_btn">
              <p @click="tab_intro_comment_change(0)" :class="{active:!tab_state}">作品简介</p>
              <p  @click="tab_intro_comment_change(1)" :class="{active:tab_state}">书评</p>
            </div>
            <keep-alive>
              <component v-bind:is="tab_intro_comment_list[tab_state]"></component>
            </keep-alive>
          </div>
          </div>
      </div>
      <Footers></Footers>
    </div>
  </transition>
</template>

<script>
  import Headers from '@/components/commons/header/header.vue'
  import Footers from '@/components/commons/footer/footer.vue'
  import bookinfoBase from '@/components/bookinfo/bookinfo_base.vue'
  import readBtn from '@/components/xiaozujian/btn/readBtn.vue'
  import addBtn from '@/components/xiaozujian/btn/addBtn.vue'
  import catalog from '@/components/xiaozujian/btn/catalog.vue'
  import newCatalog from '@/components/xiaozujian/catalog/newCatalog.vue'
  import bookinfoHbInfo from '@/components/bookinfo/bookinfo_hb_info.vue'
  import comment from '@/components/xiaozujian/comment.vue'
  import intro from '@/components/xiaozujian/intro.vue'
  export default {
    name: 'bookinfo',
    data () {
      return {
        msg: '13213',
        bookId: 1,
        isCollect: {'code': 1, 'msg': '已收藏'}, // 是否收藏 isCollect: {'code': 0, 'msg': 'wei收藏'} // 是否收藏
        tab_intro_comment_list: ['intro', 'comment'],
        tab_state: 0
      }
    },
    methods: {
      tab_intro_comment_change: function (i) {
        this.tab_state = i
      }
    },
    components: { bookinfoBase, Headers, Footers, readBtn, addBtn, catalog, newCatalog, bookinfoHbInfo, comment, intro }
  }
</script>


<style scoped>
  .bookinfo{
    position: relative;
  }
  .bookinfo_main{
    padding: 10px 10px 1px 10px;
    background: #fff;
  }
.bookinfoTab .btnleft{padding:0 0 0 10px;float:left;}
  .bookinfoTab .btnright{padding:0 10px 0 16px;float:left;}
.bookinfoTab .bookinfo_readBtn{
  color:#fff;
}
  .bookinfo_addBtn{
    color:#f90;
    background: #fff;
  }
  .bookinfo_addBtnimg{
    background: #fff;
    background: url(../../../static/img/bookinfo/add.png) 22px center no-repeat;
    background-size: 10px 10px;
  }
  .bookinfo_chapter_box{
    padding:14px 0 14px 10px;
    border-bottom: 1px solid #eee ;
    margin-bottom: 14px;

  }
  .bookinfo_chapter_catalog{
    color:#333;
  }
  .bookinfo_chapter_left{
    float: left;
  }
  .bookinfo_chapter_right{
    float: right;
  }
  .bookinfo_hb_info_box{
    margin-top: 14px;
  }
  .bookinfo_intro_comment_box{
    position: relative;
  }
.place_box{
  background: rgb(241,241,243);
  height: 10px;
 position: absolute;
  left: -10px;
  width: 320px;
}
  .margin_top_place{
    padding-top: 10px;
  }
  .tab_intro_comment_btn p{
    display: inline-block;
    margin-right: 15px;
  }
  .tab_intro_comment_btn p.active{
    color:#f90;
    border-bottom: 1px solid #f90;
  }
  .tab_intro_comment_btn{
    padding:21px 10px 10px 10px;
  }
</style>
